<!DOCTYPE html>
<head>
	<title>Tab Menu</title>
	<meta charset="utf-8">
		
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile.structure-1.0.1.min.css" />
	<script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/jquery.mobile-1.1.1.min.js"></script>
	
	<link rel="stylesheet" href="css/menu.css" />
	<script type="text/javascript">
	$(document).ready(function() {
		//hide the box at the beginning	
		$('.box').hide();
		//show the box only click or touch anywhere in body tag
		$('body').click(function(){
			$('.box').show();
		});	
  		//get all the li from the #menu ul
  		$('#menu li').click(function(){
    	//perform the actions when it's not selected
    	if (!$(this).hasClass('selected')) {    
	    //remove the selected class from all li    
	    $('#menu li').removeClass('selected');
	    //Reassign the LI
	    $(this).addClass('selected');
	    //Hide all the div in .boxBody
	    $('.boxBody div.parent').slideUp('100');
	    //Look for the right DIV in boxBody according to the Navigation ul index, therefore, the arrangement is very important.
	    $('.boxBody div.parent:eq(' + $('#menu > li').index(this) + ')').slideDown('100');
	 }
  }).mouseover(function() {
    //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest    
    $(this).addClass('mouseover');
    $(this).removeClass('mouseout');   
    
  }).mouseout(function() {
    //Add and remove class
    $(this).addClass('mouseout');
    $(this).removeClass('mouseover');    
    
  });
	//Mouseover with animate Effect for Category menu list
  	$('.boxBody #category li').click(function(){

    //Get the Anchor tag href under the li
    window.location = $(this).children().attr('href');
  	}).mouseover(function() {

    //Change background color and animate the padding
    $(this).css('backgroundColor','#888');
    $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
  	}).mouseout(function() {
    
    //Change background color and animate the padding
    $(this).css('backgroundColor','');
    $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
  	});  
	
	//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
  	$('#.boxBody li').click(function(){
    	window.location = $(this).children().attr('href');
  	}).mouseover(function() {
    $(this).css('backgroundColor','#888');
  	}).mouseout(function() {
    $(this).css('backgroundColor','');
  	});  	
  
});
</script>

<style>
li.comments {background:url(images/tabComment.png) no-repeat 0 -32px;}
li.posts {background:url(images/tabStar.png) no-repeat 0 -32px;}
li.category {background:url(images/tabFolder.png) no-repeat 0 -32px;}
li.famous {background:url(images/tabHeart.png) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}

.box {width:250px;}
.boxTop {background:url(images/boxTop.png) no-repeat;height:0.5em;clear:both}
.boxBottom {background:url(images/boxBottom.png) no-repeat;height:0.5em;}

.boxBody div.parent {display:none;}
.boxBody div.show {display:block;}

.boxBody div ul {margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(images/arrow.gif)}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:0.25em 0em;cursor:hand;cursor:pointer}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li span {font-size:8px;font-style:italic; color:#888;}
</style>
</head>
<body>
<h2>click anywhere on screen</h2>
<div class="box">
	<ul id="menu">
  		<li class="posts selected"></li>
  		<li class="comments"></li>
  		<li class="category"></li>
  		<li class="famous"></li>
	</ul>
	<div class="boxTop"></div>	

	<div class="boxBody">
  		<div id="posts" class="show parent">
    		<ul>
      			<li>item1</li>
      			<li>item2</li>
      			<li>item3</li>
      			<li class="last">item4</li>
    		</ul>  
  		</div>  
  		<div id="comments" class="parent">
    		<ul>
      			<li><a>one</a></li>
      			<li><a>two</a></li>
      			<li><a>three</a></li>
      			<li class="last"><a>four</a></li>
    		</ul>
  		</div>
  		<div id="category" class="parent">
    		<ul>
      			<li>a</li>
      			<li>b</li>
      			<li>c</li>
      			<li class="last">d</li>
    		</ul>  
  		</div>
  		<div id="famous" class="parent">
    		<ul>
      			<li>1</li>
      			<li>2</li>
      			<li>3</li>
      			<li class="last">4</li>
    		</ul>  
  		</div>
	</div><!-- /boxBody -->

	<div class="boxBottom"></div>

</div><!-- /box -->

</body>
</html>
